<template>
  <div class="toolbar">
    <div class="toolbar-item" @click="info">
      <div class="iconfont icon-yonghutouxiang"></div>
      <p>个人中心</p>
    </div>
    <div class="toolbar-item">
      <div class="iconfont icon-piaoju"></div>
      <p>资助一下</p>
      <div class="zizhu">
        <img src="@/assets/img/weixin-erweima.jpg" alt="">
      </div>
    </div>
    <div class="toolbar-item" @click="personPhone">
      <div class="iconfont icon-kefu"></div>
      <p>人工客服</p>
    </div>
    <div class="toolbar-item" @click="toCart">
      <div class="iconfont icon-gouwuche"></div>
      <p>购物车</p>
    </div>
    <div class="toolbar-item back-top">
      <div class="iconfont icon-huidaodingbu"></div>
      <p>回到顶部</p>
    </div>
    <!-- 组件 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :modal-append-to-body="true" :append-to-body='true' :center="true" :show-close="false" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
      <component v-bind:is="dialogCurrentComponent" @dialogCancel="dialogCancel" @dialogSubmit="dialogSubmit" :dialogInfo="dialogInfo"></component>
    </el-dialog>
  </div>
</template>
<script>
// 组件
import userAdd from '@/views/admin/userAdd'
// 工具
import tool from '@/utils/tool'
export default {
  data() {
    return {
      // dailog
      dialogInfo:'',
      dialogTitle:'',
      dialogFormVisible:false,
      dialogCurrentComponent:'',
    }
  },
  components:{
    userAdd
  },
  computed: {
    user(){
      return this.$store.getters.user
    }
  },
  methods: {
    info(){
      this.dialogTitle = '修改用户'
      this.dialogCurrentComponent = 'userAdd'
      // 用vuex里的数据，懒得写接口
      this.dialogInfo = JSON.parse(JSON.stringify(this.user))
      // 身份的数据处理
      this.dialogInfo.identity = this.dialogInfo.identity ? tool.getNameByValue(tool.identity,this.dialogInfo.identity) : ''
      // 没有下发密码，加个密码
      this.dialogInfo.password = ''
      // id得改为_id
      this.dialogInfo._id = this.dialogInfo.id
      delete this.dialogInfo.id
      
      this.dialogFormVisible = true
    },
    // 取消
    dialogCancel(){
      this.dialogFormVisible = false;
      this.dialogCurrentComponent = '';
    },
    // 提交
    dialogSubmit(){
      // 取消
      this.dialogCancel();
    },
    // 去购物车
    toCart(){
      this.$router.push({path:'/common/cart'})
    },
    // 人工客服
    personPhone(){
      this.$message.success('资金不够，等发展起来再说，还是打我的吧 18207458006')
    },
  },
  created() {
    
  },
  mounted() {
    // console.log(this.user)
    // 展示回到顶部按钮
    $(window).scroll(function(){
      // window也行
      if($(document).scrollTop()>=600){
          $('.back-top').css("height","90px")
      }else{
          $('.back-top').css("height","0px")
      }
    })
    // // 回到顶部
    // $(".back-top").click(function(){
    //   // 加在body或html才有动画
    //   $("body,html").stop().animate({
    //       scrollTop:0
    //   })
    // })
    // 另一种写法(然后在销毁组建的时候最好解绑事件---不过这里是公共组件所以一直渲染，不销毁也没关系)
    // 还有这个方法最好写成一个公共的function，销毁的时候就不用写两遍
    $(".back-top").on('click',function(){
      $("body,html").stop().animate({
        scrollTop:0
      })
    })
  },
  destroyed() {
    $(".back-top").off('click',function(){
      $("body,html").stop().animate({
        scrollTop:0
      })
    })
  },
}
</script>
<style lang="less" scoped>
.toolbar{
  position: fixed;
  right: 0;
  bottom: 200px;
  z-index: 999;
  background-color: #fff;
  text-align: center;
  .toolbar-item{
    position: relative;
    width: 82px;
    height: 90px;
    color: #757575;
    border-bottom: 1px solid #f5f5f5;
    .iconfont{
      font-size: 30px;
      padding-top: 15px;
    }
    p{
      padding-top: 6px;
    }
    &:hover{
      color: #00e28b;
      .zizhu{
        visibility: visible;
      }
    }
    // 资助二维码
    .zizhu{
      position: absolute;
      top: 0;
      left: -116px;
      width: 100px;
      height: 100px;
      visibility: hidden;
      // overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
      &::after{
        content: '';
        position: absolute;
        top: 35px;
        left: 100px;
        width: 0px;
        height: 0px;
        border: 10px solid transparent;
        border-left-color: #fff;
      }
    }
  }
  .back-top{
    height: 0px;
    overflow: hidden;
    transition: all ease .3s;
  }
}
</style>